<template>
  <div id="container">
    <el-row>
      <el-col :span="6" :offset="1">
        <el-progress :percentage="onePercentage" :color="oneCustomColors" :format="oneFormat" :stroke-width="3"></el-progress>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-progress :percentage="twoPercentage" :color="twoCustomColors" :format="twoFormat" :stroke-width="3"></el-progress>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-progress :percentage="ThreePercentage" :color="ThreeCustomColors" :format="ThreeFormat" :stroke-width="3"></el-progress>
      </el-col>
      <el-col :span="2" :offset="1" style="line-height: 15px;">
        {{content}}
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "PasswordStrength",
  model: {
    event: 'change',
    prop: 'password'
  },
  props: {
    //密码
    password: {
      type: [String,Boolean,Number,Object],
      required: true,
      default: "",
    },
  },
  watch:{
    password(newValue){
      const mode = this.checkPasswordStrength(newValue);
      //逻辑处理
      switch (mode) {
          //初始化状态
        case 0:
          this.content = '';
          this.onePercentage = 0;
          this.twoPercentage = 0;
          this.ThreePercentage = 0;
          break;
        case 1:
          this.content = '弱';
          this.onePercentage = 100;
          this.twoPercentage = 0;
          this.ThreePercentage = 0;
          break;
        case 2:
          this.content = '中';
          this.onePercentage = 100;
          this.twoPercentage = 100;
          this.ThreePercentage = 0;
          break;
        case 3:
          this.content = '中';
          this.onePercentage = 100;
          this.twoPercentage = 100;
          this.ThreePercentage = 0;
          break;
        default:
          this.content = '高';
          this.onePercentage = 100;
          this.twoPercentage = 100;
          this.ThreePercentage = 100;
          break;
      }
    }
  },
  data(){
    return{
      content:"",
      onePercentage:0,
      twoPercentage:0,
      ThreePercentage:0,
      oneCustomColors: [
        {color: '#f56c6c', percentage: 100}
      ],
      twoCustomColors: [
        {color: '#e6a23c', percentage: 100}
      ],
      ThreeCustomColors: [
        {color: '#67c23a', percentage: 100}
      ]
    }
  },
  methods: {
    oneFormat() {
      return "";
    },
    twoFormat() {
      return "";
    },
    ThreeFormat() {
      return "";
    },
    //密码强度验证
    checkPasswordStrength(value) {
      let mode = 0;
      //正则表达式验证符合要求的
      if (value.length < 1) return mode;
      if (/\d/.test(value)) mode++; //数字
      if (/[a-z]/.test(value)) mode++; //小写
      if (/[A-Z]/.test(value)) mode++; //大写
      if (/\W/.test(value)) mode++; //特殊字符
      return mode;
    }
  }
}
</script>

<style>
.el-progress__text {
  display: none;
}

.el-progress-bar {
  padding-right: 0px;
  margin: 0px;
}
</style>